<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'site-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row>
        <el-col :span="18">
          <el-form ref="siteForm" :model="site" :rules="rules" label-width="142px">
            <h4>店铺信息</h4>
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="site.name" disabled/>
            </el-form-item>
            <el-form-item label="店铺链接" prop="domain">
              <el-input v-model="site.domain" disabled/>
            </el-form-item>
            <el-form-item label="店铺邮箱" prop="siteEmail">
              <el-input v-model="site.siteEmail" placeholder="如果有需要，我们会通过此邮箱来联系您。" autocomplete="off"
                        class="no-autofill-pwd" style="width: 400px"/>
              <el-input v-model="site.siteEmail" style="position: fixed;bottom: -9999px"></el-input>
            </el-form-item>
            <el-form-item label="客服邮箱" prop="serviceEmail">
              <el-input v-model="site.serviceEmail" placeholder="此邮箱是店铺联系顾客的默认邮箱。" autocomplete="off"
                        style="width: 400px"/>
              <el-input v-model="site.serviceEmail" style="position: fixed;bottom: -9999px"></el-input>
            </el-form-item>
            <el-form-item label="财务邮箱" prop="financeEmail">
              <el-input v-model="site.financeEmail" placeholder="用于存在费用争议时联系的邮箱，请务必填写。" autocomplete="off"
                        style="width: 400px"/>
              <el-input v-model="site.serviceEmail" style="position: fixed;bottom: -9999px"></el-input>
            </el-form-item>
            <el-form-item label="易仓ACCOUNT" prop="ecangAccount">
              <el-input style="position: fixed;bottom: -9999px"></el-input>
              <el-input v-model="site.ecangAccount" placeholder="易仓ACCOUNT。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="曼巴TOKEN">
              <el-input style="position: fixed;bottom: -9999px"></el-input>
              <el-input v-model="site.mambaToken" placeholder="曼巴TOKEN。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="曼巴ShopKey">
              <el-input style="position: fixed;bottom: -9999px"></el-input>
              <el-input v-model="site.mambaShopKey" placeholder="曼巴表单秘钥。" auto-complete="off"
                        style="width: 400px"/>
            </el-form-item>
            <el-form-item label="店铺图标" prop="faviconUrl" class="no-border pic">
              <upload-file accept="image/jpeg,image/jpg,image/png"
                           :fileType="['png', 'jpg', 'jpeg']"
                           :isShowTip="true"
                           :lazy="true"
                           :responseFn="handleResponse"
                           :action="uploadPath"
                           title="图片"
                           v-model="site.faviconUrl"
              ></upload-file>
              <b style="color: #F56C6C">建议尺寸：32*32px</b>
            </el-form-item>
            <h4>常规设置</h4>
            <el-form-item label="PayPal付款方式" prop="paypalSdk">
              <el-select v-model="site.paypalSdk" placeholder="请选择PayPal付款方式" style="width: 400px">
                <el-option :value=true label="前端sdk支付"></el-option>
                <el-option :value=false label="后台api支付"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺货币" prop="currencyType">
              <el-select v-model="site.currencyType" placeholder="请选择店铺货币" style="width: 400px" @change="handleSelectCurrency">
                <el-option v-for="currency in currencyList" :value="currency.value" :key="currency.value"
                           :label="currency.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺时区" prop="timeZone">
              <el-select v-model="site.timeZone" placeholder="请选择店铺时区" style="width: 400px">
                <el-option v-for="timeZone in timeZoneList" :value="timeZone.value" :key="timeZone.value"
                           :label="timeZone.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否开启多语言" prop="languageSwitch">
              <el-switch
                  v-model="site.languageSwitch"
                  active-color="#1e90ff">
              </el-switch>
            </el-form-item>
            <el-form-item label="根据浏览器语言切换" prop="browserLanguageSwitch" v-if="site.languageSwitch">
              <el-switch
                  v-model="site.browserLanguageSwitch"
                  active-color="#1e90ff">
              </el-switch>
            </el-form-item>
            <el-form-item label="是否开启多货币" prop="exchangeRatesSwitch" v-show="site.currencyType === 'USD'">
              <el-switch
                  :disabled="site.currencyType !== 'USD'"
                  v-model="site.exchangeRatesSwitch"
                  active-color="#1e90ff">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit('siteForm')" :loading="submitLoading">保存</el-button>
              <el-button @click="handleReset('siteForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import leaveMsg from '@/utils/common-mixins';
import uploadFile from '@/components/Upload/uploadFile';
import {addSite, getSite, updateSite} from '@/api/site';
import {getInfo} from '@/api/system';
import axios from 'axios';
import {mapGetters} from 'vuex';

export default {
    name: 'site-edit',
    mixins: [leaveMsg],
    components: {uploadFile},
    data () {
        return {
            siteId: this.$route.params.id,
            currencyList: [
                {value: 'USD', name: '美元(USD)'},
                {value: 'EUR', name: '欧元(EUR)'},
                {value: 'GBP', name: '英镑(GBP)'},
                {value: 'CAD', name: '加元(CAD)'},
                {value: 'AUD', name: '澳元(AUD)'}
            ],
            timeZoneList: [
                {value: 'UTC-5', name: '(UTC-05:00) 美国东部时间'}
            ],
            site: {
                name: '',
                domain: '',
                siteEmail: '',
                financeEmail: '',
                serviceEmail: '',
                ecangAccount: '',
                mambaToken: '',
                mambaShopKey: '',
                faviconUrl: '',
                currencyType: '',
                timeZone: '',
                paypalSdk: '',
                languageSwitch: false,
                browserLanguageSwitch: false,
                exchangeRatesSwitch: false
            },
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            rules: {
                name: [
                    {required: true, message: '请输入店铺名称', trigger: 'blur'},
                    {type: 'string', pattern: /^[a-zA-Z\d]+$/, message: '店铺名只支持英文或数字', trigger: 'blur'}
                ],
                currencyType: [
                    {required: true, message: '请选择店铺货币', trigger: 'blur'}
                ],
                timeZone: [
                    {required: true, message: '请选择店铺时区', trigger: 'blur'}
                ],
                paypalSdk: [
                    {required: true, message: '请选择PayPal付款方式', trigger: 'blur'}
                ],
                siteEmail: [
                    {required: true, message: '请输入站点邮箱', trigger: 'blur'},
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ],
                financeEmail: [
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ],
                serviceEmail: [
                    {required: true, message: '请输入客服邮箱', trigger: 'blur'},
                    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                ]
                /* ecangAccount: [
                    {required: true, message: '请输入易仓ACCOUNT', trigger: 'blur'}
                ] */
            },
            submitLoading: false
        };
    },
    watch: {
        site: {
            handler: function (newValue) {
                if (newValue) {
                    this.pageCount++;
                    if (this.pageCount !== 1) {
                        this.isEdit = true;
                    }
                }
            },
            immediate: false,
            deep: true
        }
    },
    computed: {
        ...mapGetters(['siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    },
    methods: {
        handleSelectCurrency () {
            this.site.exchangeRatesSwitch = false;
        },
        initData () {
            getSite(this.siteId).then(res => {
                this.site = res.data;
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (name) {
            this.isEdit = false;
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    const list = new Map([
                        ['USD', '$'],
                        ['EUR', '€'],
                        ['GBP', '￡'],
                        ['CAD', 'C＄'],
                        ['AUD', 'A$']
                    ]);
                    const currencySymbol = list.get(this.site.currencyType);
                    updateSite({...this.site, currencySymbol}).then(async res => {
                        if (res.code === '200') {
                            getInfo().then(val => {
                                this.$store.commit('SET_SITE_LIST', val.data.siteList);
                                this.submitLoading = false;
                                this.$message.success('修改成功');
                                this.$store.dispatch('CLEAR_FRONT_CACHE');
                                this.$router.push({name: 'site-list'});
                            });
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset (name) {
            this.$router.push({name: 'site-list'});
        }

    },
    mounted () {
        this.initData();
    }
};

</script>

<style scoped>

</style>
